<template>
  <section class="mui-content pd">
    <mh-header headName="确认订单"> </mh-header>
    <div class="order-receive">
      <p v-if="!recAdd" class="mui-text-center no-receive">还没有收货人，快去选择哦</p>
      <div class="o-receive flex" v-else>
        <span class="mui-icon mui-icon-location"></span>
        <!-- <img :src="recAdd.pic" alt="头像"> -->
        <span v-text="recAdd.contacts"></span>
        <span v-text="recAdd.contacts_phone"></span>
        <span v-text="recAdd.address"></span>
      </div>
    </div>
    <div class="order-goods">
      <h4>商品清单</h4>
      <div class="goods-info flex">
        <div class="pic-box">
          <img :src="goodsDetail.image" alt="缩略图">
        </div>
        <div class="info-box">
          <p class="g-name">{{goodsDetail.name}}</p>
          <p class="g-size mh-mg-tb">规格{{goodsDetail.specifications}}</p>
          <p class="flex-bt">
            <span class="g-price" v-text="'￥'+goodsDetail.price">￥ 0</span>
            <span class="g-num" v-text="'x'+num">x1</span>
          </p>
        </div>
      </div>
    </div>
    <div class="order-sub-info">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell flex-bt">
          <span>数量</span>
          <mh-numbox> </mh-numbox>
        </li>
        <li class="mui-table-view-cell flex-bt">
          <span>配送方式</span>
          <a class="mui-navigate-right postage">
            <span>快递</span>
            <span class="price">￥0</span>
          </a>
        </li>
        <li class="mui-table-view-cell flex">
          <span>祝福语</span>
          <textarea cols="20" rows="4" placeholder="请输入您的祝福语" v-model='remarks'></textarea>
        </li>
      </ul>
    </div>
    <div class="select-foot mui-text-right">
      <span>金额: </span>
      <span class="price">￥{{totalPrice}}</span>
      <button type="button" class="mui-btn mh-btn" @tap="orderConfirm">提交订单</button>
    </div>
  </section>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import MhNumbox from '@/components/mh-numbox/mh-numbox';
  import {MH_API} from "@/api/api";
  export default {
    name: "order-confirm",
    data () {
      return {
        recAdd: {
          // name: 'Darwin',
          // edu: '本科',
          // age: 23,
          // pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1183636319,1888902440&fm=26&gp=0.jpg'
        },
        goodsDetail: {
          // pic: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg',
          // name: '法芙娜玫瑰',
          // size: '6支',
          // price: 28,
          // num: 1
        },
        id: null,
        address_id: 1,
        num: 1,
        size: 1,
        totalPrice: 0,
        remarks: '',
        address: {},
        price: 0
      }
    },
    components: {
      MhHeader,
      MhNumbox
    },
    methods:{
      orderConfirm(){
        let self = this;
        MH_API.createOrder({
          goods_id: self.id,
          address_id: self.address_id,
          num: self.num,
          remarks: self.remarks
        }).then(res => {
          if (res.status === 200) {
            this.$router.push({
              path: '/pay',
              query: {
                orderId: res.data.order_id,
                price: res.data.price
              }
            })
          }
        })
      },
      getNum(num){
        let totalPrice = this.price * num;
        this.totalPrice = totalPrice.toFixed(2);
      }
    },
    created () {
      let id = this.$route.query.id;
      let num = this.$route.query.number;
      this.num = num;
      this.size = this.$route.query.size;
      let self = this;
      self.id = id;
      MH_API.getGoods({
        id: id
      }).then(res => {
        if (res.status === 200) {
          self.goodsDetail = res.data[0];
          let obj = res.data[0];
          self.price = obj.price;
          self.totalPrice = obj.price * num;
        }
      })

      //地址
      MH_API.getAddresss({

      }).then(res => {
        if (res.status === 200) {
          let newArr = res.data;
          for(let i=0,len=newArr.length;i<len;i++){
            if(newArr[i].is_default==1){
              self.recAdd = newArr[i];
              self.address_id = newArr[i].id;
            }
          }
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .order-receive {
    margin-bottom: 1rem;
    padding: 1.5rem;
    background-color: #fff;
  }
  .o-receive {
    span {
      margin-left: 1rem;
      @include sc(1.4rem, #333);
      &.mui-icon {margin-right: .5rem;margin-left: 0;@include sc(1.8rem, #666);}
    }
    img {width: 2.5rem;height: 2.5rem;border-radius: 100%;}
  }
  .no-receive {
    position: relative;
    &:after {
      position: absolute;
      top: 50%;
      display: inline-block;
      font-family: Muiicons;
      font-size: inherit;
      line-height: 1;
      color: #bbb;
      text-decoration: none;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-font-smoothing: antialiased;
      right: 0;
      content: '\e583';
    }
  }
  .pic-box {
    width: 8rem;
    height: 8rem;
    overflow: hidden;
    img {width: 100%;}
  }
  .order-goods {
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: #fff;
    h4 {
      margin-bottom: 1rem;
      @include sc(1.3rem, #333);
    }
  }
  .info-box {
    padding:0 1rem;
    flex: 1;
    .g-size {}
    .g-name,.g-num {@include sc(1.5rem, #333);}
    .g-price {@include sc(1.5rem, #f26c60);}
  }
  .order-sub-info {
    .mui-table-view-cell>span {
      min-width: 6rem;
      @include sc(1.4rem, #646464);
    }
    textarea {height: 2rem;}
    .postage {
      padding-right: 3rem;
      span {@include sc(1.4rem, #646464);}
    }
  }
  .select-foot {
    display: flex;
    position: absolute;
    margin-top: 2.5rem;
    align-items: center;
    justify-content: flex-end;
    height: 4.8rem;
    line-height: 4.8rem;
    background-color: #fff;
    border-top: 1px solid #eee;
    bottom: 0;
    left: 0;
    right: 0;
    .mh-btn {
      line-height: 4.8rem;
      margin-left: 1rem;
      padding: 0 3.4rem;
      border-radius: 0;
      font-size: 1.7rem;
    }
  }
</style>
